<script setup lang="ts">
import { reactive } from 'vue';
import { Form } from 'ant-design-vue';
import { CARE_LEVEL_OPTIONS, OLD_STATUS_OPTIONS } from '@/const/index.ts';
import TagChecked from '@/components/tag-checked/index.vue';
import DateSelect from './date.vue';

const useForm = Form.useForm;
const formState = reactive({
	elderlyInfo: '',
	careLevel: [],
	elderlyStatus: [],
	checkInTime: '',
});

useForm(formState);
// watch(formState, () => {
// 	console.log(formState);
// }, {
// 	deep: true,
// 	immediate: true
// });
</script>

<template>
	<div class="form-wrap pb-5">
		<h3 class="mt0">搜索条件</h3>
		<a-form-item label="长者信息">
			<a-input class="w-[50%]" placeholder="可输入长者姓名、身份证号、手机号、房间号进行查询" v-model:value="formState.elderlyInfo"></a-input>
		</a-form-item>
		<a-form-item label="照护等级">
			<!-- <a-radio-group :options="CARE_LEVEL_OPTIONS" optionType="button" v-model:value="formState.careLevel">
			</a-radio-group> -->
			<TagChecked :options="CARE_LEVEL_OPTIONS" v-model:value="formState.careLevel"></TagChecked>
		</a-form-item>
		<a-form-item label="入住方式">
			<!-- <a-radio-group :options="OLD_STATUS_OPTIONS" optionType="button" v-model:value="formState.elderlyStatus">
			</a-radio-group> -->
			<TagChecked :options="OLD_STATUS_OPTIONS" v-model:value="formState.elderlyStatus"></TagChecked>
		</a-form-item>
		<a-form-item label="入住时间">
			<!-- <a-radio-group :options="CHECK_TIME_OPTIONS" optionType="button" v-model:value="formState.checkInTime">
			</a-radio-group> -->
			<DateSelect></DateSelect>
		</a-form-item>
	</div>
</template>
<style scoped></style>
